<template>
    <div id="building">

        <el-row>
            <el-col :xs="1"
                    :sm="5"
                    :lg="10"></el-col>

            <el-col :xs="22"
                    :sm="16"
                    :lg="5">

                <el-card class="box-card" style="margin-top: 40%;">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="免密码登录" name="first">
                            <el-form ref="uploadForm" :rules="rules" :model="formLogin"
                                     @keyup.enter="submit">

                                <div class="va-input">
                                    <el-form-item prop="username">
                                        <el-input

                                                placeholder="手机号或邮箱"
                                                v-model="formLogin.username"
                                                class="input-with-select"
                                                clearable
                                                @input="validate('formLogin')"
                                        >
                                        </el-input>
                                    </el-form-item>

                                    <el-form-item prop="password">

                                        <el-input
                                                show-password
                                                placeholder="密码"
                                                type="text"
                                                v-model="formLogin.password"
                                                style="margin-top: 15px;float: left"
                                                class="input-with-select"
                                                append="el-icon-date"
                                                @input="validate('formLogin')"
                                        >

                                        </el-input>
                                        <div v-if="errorMgs"
                                             style="float: left;
                                    z-index:10;
                                    right: 30px;
                                    top: 25%;
                                    position:absolute;
                                    color: #F56C6C;
                                    ">{{errorMgs}}
                                        </div>
                                    </el-form-item>

                                    <el-link type="primary" style="float: right">忘记密码</el-link>
                                </div>

                                <div style=" margin-top: 50px">
                                    <el-button type="primary"
                                               style="width: 100%;"
                                               :disabled="loginBut"
                                               @click="submit">
                                        登录
                                    </el-button>
                                </div>
                                <el-divider></el-divider>
                                <div>
                                    社交帐号登录
                                    <el-link icon="el-icon-user-solid" circle href="https://gitee.com/oauth/authorize?client_id=8848021a94df073dfb48e1a3a91b1526ccdc997125ee788ad233e66bfc7142ef&redirect_uri=http%3A%2F%2F127.0.0.1%3A8889%2Flogin%2Fgithub&response_type=code"></el-link>
                                </div>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
                <div style="width: 100%;height: 70px;">
                </div>

            </el-col>
        </el-row>
    </div>

</template>

<script>

    import { getCurrentInstance} from 'vue'
    import v from './index'
    import {validate} from './index'

    export default {
        name: "login",
        setup() {
            let errorMgs = v.errorMgs
            let
                loginBut = v.loginBut
            let
                activeName = v.activeName
            let
                formLogin = v.formLogin
            let
                rules = v.rules
            let
                uploadForm = v.uploadForm

            const {proxy} = getCurrentInstance()



            function submit() {
                uploadForm.value.validate(valid => {
                    if (valid) {
                        loginBut = valid
                        proxy.$store.dispatch('account/login',formLogin)
                            .then(() => {
                                proxy.$router.replace(proxy.$route.query.redirect || '/')
                            }
                        ).catch((err) => {
                            validate()
                            errorMgs = err
                            setTimeout(() => {
                                errorMgs = null
                            }, 1500);
                        })
                    }
                })
            }

            return {
                //date
                errorMgs,
                loginBut,
                activeName,
                formLogin,
                rules,
                uploadForm,

                //function
                validate,
                submit
            }

        }
    }
</script>


<style scoped>
    /* 利用穿透，设置input边框隐藏 */
    .va-input >>> .el-input__inner {
        border: 0;
        border-bottom: 1px solid #dcdfe6;
    }

    /* 利用穿透，设置input边框隐藏 */
    .va-input >>> .el-input-group__append {
        border: 0;
        background: none;
    }

    .box-login {
        background: #F6F6F6;
        width: 400px;
        margin: auto;
        margin-top: 15%;
    }

    #building {
        width: 100%;
        height: 100%;
        position: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        top: 0;
        bottom: 0;
        overflow-y: scroll;
        overflow-x: hidden;
    }
</style>